export function chartOptions() {
  const twoBarOption = (echarts, itemNames = []) => {
    const offsetX = 10;
    const offsetY = 5;
    const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)"];
    // 绘制左侧面
    const CubeLeft = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0,
      },
      buildPath: function (ctx: any, shape) {
        // 会canvas的应该都能看得懂，shape是从custom传入的
        const xAxisPoint = shape.xAxisPoint;
        const c0 = [shape.x, shape.y];
        const c1 = [shape.x - offsetX, shape.y - offsetY];
        const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
        const c3 = [xAxisPoint[0], xAxisPoint[1]];
        ctx
          .moveTo(c0[0], c0[1])
          .lineTo(c1[0], c1[1])
          .lineTo(c2[0], c2[1])
          .lineTo(c3[0], c3[1])
          .closePath();
      },
    });

    // 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0,
      },
      buildPath: function (ctx: any, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c1 = [shape.x, shape.y];
        const c2 = [xAxisPoint[0], xAxisPoint[1]];
        const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
        const c4 = [shape.x + offsetX, shape.y - offsetY];
        ctx
          .moveTo(c1[0], c1[1])
          .lineTo(c2[0], c2[1])
          .lineTo(c3[0], c3[1])
          .lineTo(c4[0], c4[1])
          .closePath();
      },
    });

    // 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0,
      },
      buildPath: function (ctx: any, shape) {
        const c1 = [shape.x, shape.y];
        const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
        const c3 = [shape.x, shape.y - offsetX];
        const c4 = [shape.x - offsetX, shape.y - offsetY];
        ctx
          .moveTo(c1[0], c1[1])
          .lineTo(c2[0], c2[1])
          .lineTo(c3[0], c3[1])
          .lineTo(c4[0], c4[1])
          .closePath();
      },
    });

    // 注册三个面图形
    echarts.graphic.registerShape("CubeLeft", CubeLeft);
    echarts.graphic.registerShape("CubeRight", CubeRight);
    echarts.graphic.registerShape("CubeTop", CubeTop);

    const distance = 15;
    let option = {
      background: "transparent",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        backgroundColor: "rgba(28,64,81,0.7)",
        borderColor: "transparent",
        textStyle: {
          fontSize: 20,
          color: "#fff",
        },
        formatter: (params: any, ticket: any, callback: any) => {
          return `
                ${params[0].name} <br/>
                <span style="display: inline-block;vertical-align: middle;width: 10px;height: 4px;margin-right: 5px; background: ${colorSingleList[0]}"></span>${itemNames[0] || params[0].seriesName || ''}  <span style="color: #1BFBFA">${params[0].value}</span>`
              + (params[1] ? `<br/><span style="display: inline-block;vertical-align: middle;width: 10px;height: 4px;margin-right: 5px; background: ${colorSingleList[1]}"></span>${itemNames[1] || params[1].seriesName ||  ''}  <span style="color: #1BFBFA">${params[1].value}</span>` : '')
        },
      },
      grid: { left: "10%", right: "10%", top: "15%", bottom: "16%" },
      xAxis: [{
        type: "category",
        data: [],
        axisLine: {
          show: false
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0, // 显示所有标签
          formatter: function (value: any) {
            // 将每个标签中的文本按每四个字符进行分割并加上换行符
            return value.match(/.{1,4}/g).join("\n");
          },
          // 调整标签样式，确保换行显示不会导致标签相互重叠
          textStyle: {
            fontSize: 20,
            color: "#667A8E",
          },
        },
      }],
      yAxis: [{
        name: "",
        type: "value",
        nameTextStyle: {
          color: "#fff",
          fontWeight: 400,
          fontSize: 14,
        },
        axisLine: {
          show: false,
          lineStyle: {
            width: 1,
            color: "#667A8E",
          },
        },
        splitLine: {
          // 配置分割线
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          fontSize: 20,
          color: "#667A8E",
          formatter: "{value}" + "",
        },
      }],
      series: [
        {
          type: "custom",
          renderItem: (params: any, api: any) => {
            const location = api.coord([api.value(0), api.value(1)]);
            const xAxisPoint = api.coord([api.value(0), 0]);

            return {
              type: "group",
              children: [
                {
                  type: "CubeLeft",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0] - distance,
                    y: location[1],
                    xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        // color: "#5CE1FF",
                        color: "rgba(3, 230, 254, 1)",
                      },
                      {
                        offset: 0.35,
                        // color: "#088BFF",
                        color: "rgba(3, 230, 254, 0.8)",
                      },
                      {
                        offset: 1,
                        color: "transparent",
                      },
                    ]),
                  },
                },
                {
                  type: "CubeRight",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0] - distance,
                    y: location[1],
                    xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        // color: "#5CE1FF",
                        color: "rgba(3, 230, 254, 1)",
                      },
                      {
                        offset: 0.35,
                        // color: "#088BFF",
                        color: "rgba(3, 230, 254, 0.8)",
                      },
                      {
                        offset: 1,
                        color: "transparent",
                      },
                    ]),
                  },
                },
                {
                  type: "CubeTop",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0] - distance,
                    y: location[1],
                    xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                  },
                  style: {
                    fill: "#5CE1FF",
                  },
                },
              ],
            };
          },
          data: [],
        },
        {
          type: "custom",
          renderItem: (params: any, api: any) => {
            const location = api.coord([api.value(0), api.value(1)]);
            const xAxisPoint = api.coord([api.value(0), 0]);
            return {
              type: "group",
              children: [
                {
                  type: "CubeLeft",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0] + distance,
                    y: location[1],
                    xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#B8EB8F",
                      },
                      {
                        offset: 0.35,
                        color: "#B8EB8F",
                      },
                      {
                        offset: 1,
                        color: "transparent",
                      },
                    ]),
                  },
                },
                {
                  type: "CubeRight",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0] + distance,
                    y: location[1],
                    xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#B8EB8F",
                      },
                      {
                        offset: 0.35,
                        color: "#B8EB8F",
                      },
                      {
                        offset: 1,
                        color: "transparent",
                      },
                    ]),
                  },
                },
                {
                  type: "CubeTop",
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0] + distance,
                    y: location[1],
                    xAxisPoint: [xAxisPoint[0] + distance, xAxisPoint[1]],
                  },
                  style: {
                    fill: "#B8EB8F",
                  },
                },
              ],
            };
          },
          data: [],
        },
      ],
    };

    return option;
  };

  return {
    twoBarOption,
  };
}
